<template>
  <div>
    <div>
     <van-nav-bar
      class="navbar"
      title="地图找房"
      left-arrow
      @click-left="$router.back()"
      :fixed="true"
    />
    </div>
    <div class="map-container" v-if="cityData.length">
      <baidu-map class="map" :center="center" :zoom="zoom">
        <bm-label
          ref="map"
          v-for="(item, index) in cityData"
          @click="handleCity(item)"
          :content="`${item.label}\n${item.count}套`"
          :key="index"
          :position="{ lng: item.coord.longitude, lat: item.coord.latitude }"
          :labelStyle="type < 3 ? labelStyle : labelStyle2"
          title="Hover me"
        />
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT">
           <bm-label
          ref="map"
          content="暂无数据"
          :position="center"
          :labelStyle="labelStyle"
          title="Hover me"
        />
        </bm-navigation>
      </baidu-map>
    </div>
   <div v-else class="map-container">
    <baidu-map :center="center" class="map"></baidu-map>
   </div>
    <div class="loading" v-if="showLoading">
      <van-loading size="40px" color="#333333">加载中...</van-loading>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" >
      <div class="header" style="background-color:#24b972">
        <div>房屋列表</div>
        <div style="fontSize: 14px;" @click="$router.push('./findhouse')">更多房屋</div>
      </div>
      <div>
      <CommList v-for="(item,index) in houseList" :key="index" :item="item">
    
      </CommList>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getCity } from "@/api/cityCode";
import { getHhouseDistribution } from "@/api/citymsg";
import { getHouseList } from '@/api/citymsg'
import CommList from '@/components/oneHouseList'
export default {
  components: { CommList},
  data() {
    return {
      show: false,
      showLoading: true,
      center: null,
      type: 1,
      zoom: 11,
      cityData: [],
      houseList: [],
      labelStyle: {
        width: "70px",
        height: "70px",
        ["line-height"]: "70px",
        ["text-align"]: "center",
        display: "inline-block",
        position: "absolute",
        ["borde-radius"]: "100%",
        background: "rgba(12,181,106,.9)",
        color: "#fff",
        border: "2px solid hsla(0,0%,100%,.8)",
        [" text-align"]: "center",
        cursor: "pointer",
        ["border-radius"]: "50%",
      },
      labelStyle2: {
        display: "inline-block!important",
        width: "70px!important",
        overflow: " hidden!important",
        ["text-overflow"]: "ellipsis!important",
        ["white-space"]: "nowrap!important",
        ["vertical-align"]: "middle!important",
        ["background-color"]: "#00d271",
        color: "#fff,",
        border: 'none'
      },
    };
  },
  computed: {
     nowCity() {
      const res1 = getCity();
      return res1;
    },
    city(){
      const res2 = getCity();
      return res2.label;
    },
    id(){
      const res3 = getCity();
      return res3.id;
    }
  },
  methods: {
    async handleCity(item) {
      this.type++;
      if(this.type>3){
       const res = await getHouseList({cityId: item.value})
       this.houseList = res.body.list
       this.show=true
      }else{
        this.zoom += 3;
       this.cityData = [];
      this.showLoading = true;
      this.center = {
        lng: item.coord.longitude,
        lat: item.coord.latitude,
      };
      const res = await getHhouseDistribution(item.value);
      console.log(res);
      this.cityData = res.body;
      this.showLoading = false;
      }
    },
  },
  async created() {
    const res = await getHhouseDistribution(this.id);
    this.showLoading = false;
    console.log(res);
    this.cityData = res.body;
    this.center = this.city;
  },
};
</script>
<style lang="less" scoped>
.map-container {
  margin-top: 30px;
  width: 100vw;
  height: 100vh;
  .map {
    width: 100%;
    height: 100%;
  }
}
.loading {
  position: absolute;
  top: 50%;
  left: 40%;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 10px;
  background-color:#c0c0c2;
}
</style>